<template>
    <div class="income">
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '24px 0'}">
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('/index')">首页</a></BreadcrumbItem>
          <BreadcrumbItem>财务管理</BreadcrumbItem>
          <BreadcrumbItem>报表管理</BreadcrumbItem>
          <BreadcrumbItem>利润表</BreadcrumbItem>
        </Breadcrumb>
        <Content id="tal" :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <div class="f-header" ghost>
            <div class="f-header-search">
              <span>搜索条件：</span>
              <span>会计科目：</span>
              <Select v-model="km" style="width:30%" placeholder="请选择会计科目...">
                <Option value="全部">全部</Option>
                <Option value="应收账款">应收账款</Option>
                <Option value="应付账款">应付账款</Option>
                <Option value="其他应收账款">其他应收账款</Option>
                <Option value="其他应付账款">其他应付账款</Option>
              </Select>
              <span>时间：</span>
              <DatePicker v-model="beginTime" type="date" placeholder="请选择开始时间..." ></DatePicker>
              <DatePicker v-model="endTime" type="date" placeholder="请选择结束时间..." ></DatePicker>
            </div>
            <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
            <Button type="primary" @click="toDown"><Icon type="md-download" />导出</Button>
          </div>
          <div class="f-content" style="width: 100%;height: 72vh;overflow: hidden;margin-top: 1%">
            <div style="overflow-y:scroll;width: 101.5%;height: 100%;margin-right: -20px">
              <Table :columns="tb_columns"  :height="666" :data="report_list" size="small" ref="table"></Table>
              <Page :total="report_total" :current="report_current_page" :page-size="report_page_size" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
            </div>
          </div>
        </Content>
      </Layout>
    </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex';
  import {toGet,toPost} from "../../utils/MyAxios";
  export default {
    name: "income",
    data() {
      return {
        search:'',
        km:'全部',
        beginTime:'',
        endTime:'',
        tb_columns: [
          {
            title: '日期',
            key: 'expenseDate',
            align: 'center'
          },
          {
            title: '凭证号',
            key: 'documentNumber',
            align: 'center'
          },
          {
            title: '科目编码',
            key: 'coding',
            align: 'center'
          },
          {
            title: '会计科目',
            key: 'accountingSubject',
            align: 'center'
          },
          {
            title: '对方科目',
            key: 'counterpartSubject',
            align: 'center'
          },
          {
            title: '摘要',
            key: 'summary',
            align: 'center'
          },
          {
            title: '借方',
            key: 'debit',
            align: 'center'
          },
          {
            title: '贷方',
            key: 'credit',
            align: 'center'
          },
          {
            title: '方向',
            key: 'direction',
            align: 'center'
          },
          {
            title: '余额(元)',
            key: 'balance',
            align: 'center'
          },
        ],
      }
    },
    computed: {
      ...mapGetters(['report_list','report_total','report_current_page','report_page_size']),
    },
    methods: {
      ...mapActions(['getReportList']),
      onChange(currentPage){
        this.getReportList({
          'search':this.search,
          'category':this.km,
          'beginTime':this.formatDate(this.beginTime),
          'endTime':this.formatDate(this.endTime),
          'currentPage':currentPage*1,
          'pageSize':this.report_page_size
        });
      },
      jump(e){
        this.$router.push(e);
      },
      toDown(){
        swal({
          title: "您确认导出明细表数据吗？",
          icon: "info",
          buttons: ["取消", "确认下载"],
        })
          .then((willDown) => {
            if (willDown) {
              if(this.report_list.length>0){
                this.$refs.table.exportCsv({
                  filename: '明细表数据('+this.formatDate(new Date().toDateString())+')'
                });
              }else{
                swal("无法导出!", "表格暂无数据!", "error");
              }
            }
          });
      },
      onPageSizeChange(pageSize){
        this.getReportList({
          'search':this.search,
          'category':this.km,
          'beginTime':this.formatDate(this.beginTime),
          'endTime':this.formatDate(this.endTime),
          'currentPage':this.report_current_page,
          'pageSize':pageSize*1
        });
      },
      toSearch(){
        this.getReportList({
          'search':this.search,
          'category':this.km,
          'beginTime':this.formatDate(this.beginTime),
          'endTime':this.formatDate(this.endTime),
          'currentPage':this.report_current_page,
          'pageSize':this.report_page_size
        });
      },
      formatDate(date){
        if(date){
          let time = new Date(date);
          return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
        }else{
          return '';
        }
      }
    },
    mounted() {
      this.getReportList({
        'search':this.search,
        'category':this.km,
        'beginTime':this.formatDate(this.beginTime),
        'endTime':this.formatDate(this.endTime),
        'currentPage':1,
        'pageSize':10
      });
    },
  }
</script>

<style lang="css" scoped>

</style>
